<template>
    <div class="proposal">
        <div class="bg">
            <div class="left">
                <span class="bold">在线客服</span>
                <span class="bold">即时为您解答</span>
            </div>
            <img class="right" src="@/assets/service/answer01.png">
        </div>
        <div class="problem">
            <div class="head">
                <span class="title bold">请选择类型</span>
                <div class="warning" @click="show = true">
                    <img src="@/assets/images/warn1.png">
                    <span class="f12">须知</span>
                </div>
            </div>
            <div class="list">
                <div class="item" v-for="(item, index) in proposalList" :key="index" @click="goWrite(index)">
                    <div class="left">
                        <span class="spot"></span>
                        <span class="text f14">{{ item }}</span>
                    </div>
                    <img class="more" src="@/assets/images/more.png">
                </div>
            </div>
        </div>
        <HelpButton></HelpButton>
        <div class="tips" v-show="show" @click="show = false">
            <div class="content" @click.stop>
                <div class="close-btn" @click="show = false">
                    <Close></Close>
                </div>
                <span class="title bold">须知</span>
                <span class="f12 ele" v-for="(item, index) in tipsList" :key="index">{{ item }}</span>
            </div>
        </div>
    </div>
</template>
<script>
import eventBus from "@/common/event-bus";
import proposalList from "@/common/proposalList";
import tipsList from "@/common/proposalTips";
import Close from "@/components/Close.vue";
import HelpButton from '@/components/Service/HelpButton.vue';
export default {
    name: "ProposalView",
    components: {
        Close,
        HelpButton
    },
    data() {
        return {
            proposalList,
            tipsList,
            show: false,
        }
    },
    methods: {
        goWrite(path) {
            this.$router.push({ name: "write", query: { path } })
        },
        switchPage(name) {
            this.$router.push({ name })
            if (name == "service") {
                eventBus.$emit("correctPath", "/service");//NavigationBar.vue
            }
        }
    }
}
</script>
<style lang="scss" scoped>
.proposal {
    min-height: 100vh;
    background-color: #f7f7f7;

    .bg {
        height: 180px;
        border-bottom-left-radius: 25px;
        border-bottom-right-radius: 25px;
        background-image: linear-gradient(to right, #f7706d, #fe7d63);
        display: flex;
        padding: 30px;
        justify-content: flex-end;

        .left {
            display: flex;
            flex-direction: column;
            justify-content: center;

            span {
                color: white;

                &:nth-of-type(1) {
                    margin-bottom: 10px;
                }
            }
        }

        .right {
            width: 200px;
            object-fit: contain;
        }
    }

    .problem {
        z-index: 1000;
        position: relative;
        width: 345px;
        padding: 10px 20px;
        margin: -40px auto 15px;
        background-color: white;
        border-radius: 10px;

        .head {
            display: flex;
            justify-content: space-between;
            padding-bottom: 15px;
            border-bottom: 1px solid #efefef;

            .warning {
                display: flex;
                align-items: center;

                img {
                    width: 15px;
                    margin-right: 10px;
                    object-fit: contain;
                }
            }
        }

        .list {
            display: flex;
            flex-direction: column;

            .item {
                display: flex;
                justify-content: space-between;
                border-bottom: 1px solid #efefef;
                padding: 13px 0;

                .left {
                    display: flex;
                    flex-direction: row;
                    align-items: center;

                    .spot {
                        display: inline-block;
                        width: 3px;
                        height: 3px;
                        background-color: #eb2524;
                        margin-right: 10px;
                    }

                }

                .more {
                    width: 6px;
                    object-fit: contain;
                }
            }
        }
    }

    .tips {
        position: fixed;
        width: 100vw;
        height: 100vh;
        top: 0;
        left: 0;
        background-color: rgba(0, 0, 0, .3);
        z-index: 2000;

        .content {
            border-radius: 10px;
            position: absolute;
            width: 75%;
            top: 45%;
            left: 50%;
            display: flex;
            flex-direction: column;
            padding: 20px 10px;
            background-color: white;
            transform: translate(-50%, -50%);

            .close-btn {
                position: absolute;
                right: 15px;
                top: 15px;
            }

            .title {
                font-size: 20px;
                text-align: center;
                margin-bottom: 20px;
            }

            .ele {
                color: #626262;
                margin-bottom: 20px;
            }


        }
    }
}
</style>